<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			* {
				margin: 0;
				padding: 0;
			}

			li {
				list-style: none;
				display: inline-block;
				width: 150px;
				text-align: center;
			}

			#content {
				margin: 80px auto;
			}

			.books img {
				width: 60px;
				height: 90px;
				vertical-align: middle;
			}
		</style>
	</head>
	<body>
		<div id="content">
			<ul class="title">
				<li>商品图片</li>
				<li>商品信息</li>
				<li>商品单价</li>
				<li>商品数量</li>
				<li>总价</li>
				<li>操作</li>
			</ul>
			<ul class="books">
				<li><img src="img/img2.jpg" /></li>
				<li>我和狗狗活下来了</li>
				<li>¥21.90</li>
				<li>
					<input type="button" value="-" onclick="changeNum('-',this)" />
					<input type="text" value="1" size="2" />
					<input type="button" value="+" onclick="changeNum('+',this)" />
				</li>
				<li>¥21.90</li>
				<li><a href="#" onclick="removeBooks(this)">删除</a></li>
			</ul>
			<ul class="books">
				<li><img src="img/img1.jpg" /></li>
				<li>灰霾来了怎么办</li>
				<li>¥24.00</li>
				<li>
					<input type="button" value="-" onclick="changeNum('-',this)" />
					<input type="text" value="1" size="2" />
					<input type="button" value="+" onclick="changeNum('+',this)" />
				</li>
				<li>¥24.00</li>
				<li><a href="#" onclick="removeBooks(this)">删除</a></li>
			</ul>
			<div align="center">
				商品总计:<span id="sprice"></span>
				<input type="button" value="添加商品" onclick="addBook(this)" />
			</div>
		</div>
		<script>
			function addBook(obj) {
				//创建ul
				var ul = document.createElement("ul");
				ul.setAttribute("class", "books");
				//把ul插入div之前
				content.insertBefore(ul, obj.parentNode)
				//创建第一li节点
				var imgLi = document.createElement("li")
				//创建图片节点
				var img = document.createElement("img");
				//设置图片路径
				img.setAttribute("src", "img/img1.jpg");
				//把图片作为li的子元素
				imgLi.appendChild(img);
				//把li作为ul的子元素
				ul.appendChild(imgLi);


				//商品名称li节点
				var nameLi = document.createElement("li");
				nameLi.innerHTML = "我和狗狗都活了下来";
				ul.appendChild(nameLi);
				//单价li节点
				var priceLi = document.createElement("li");
				priceLi.innerHTML = "¥21.90";
				ul.appendChild(priceLi);
				//数量li节点
				var numLi = document.createElement("li");
				//减号按钮
				var btnMinus = document.createElement("input");
				btnMinus.setAttribute("type", "button");
				btnMinus.value = "-";
				btnMinus.setAttribute("onclick", "changeNum('-',this)")
				numLi.appendChild(btnMinus);
				//数量文本框
				var txtNum = document.createElement("input");
				txtNum.setAttribute("type", "text");
				txtNum.value = "1";
				txtNum.setAttribute("size", 2);
				numLi.appendChild(txtNum);

				//加号按钮
				var btnAdd = document.createElement("input");
				btnAdd.setAttribute("type", "button");
				btnAdd.value = "+";
				btnAdd.setAttribute("onclick", "changeNum('+',this)")
				numLi.appendChild(btnAdd);
				ul.appendChild(numLi);

				//总价li标签
				var costLi = document.createElement("li");
				costLi.innerHTML = "¥21.90";
				ul.appendChild(costLi);

				//操作li标签
				var removeLi = document.createElement("li");
				removeLi.innerHTML = "<a href='#' onclick='removeBook(this)'>删除</a>";
				ul.appendChild(removeLi);

				calTotalPrice(); //更新商品总计
			}

			function removeBooks(obj) {
				if (!confirm('确定要删除吗?')) {
					return;
				}
				obj.parentNode.parentNode.parentNode.removeChild(obj.parentNode.parentNode);
				calTotalPrice(); //更新商品总计
			}

			function changeNum(opr, obj) {
				if (opr == '+') {
					num = obj.previousElementSibling || opr.previousSibling;
					num.value = parseInt(num.value) + 1;
					//alert(num);
				} else if (opr == '-') {
					num = obj.nextElementSibling || opr.nextSibling;
					if (parseInt(num.value) <= 1) {
						alert('数量不能再少了!');
						return;
					}
					num.value = parseInt(num.value) - 1;
				}
				//获取显示总价的li
				tpriceNode = obj.parentNode.nextElementSibling || obj.parentNode.nextSibling;
				//获取显示单价的li
				priceNode = obj.parentNode.previousElementSibling || obj.parentNode.previousSibling;
				//计算该商品的总价
				totalPrice = parseFloat(priceNode.innerHTML.replace('¥', '')) * parseInt(num.value);
				//更新该商品总价的显示
				tpriceNode.innerHTML = '¥' + totalPrice;
				//更新商品总计
				calTotalPrice();
			}

			function calTotalPrice() {
				var books = document.getElementsByTagName("ul");
				/*
					循环ul标签,因为第一个ul是显示标题所以不需要计算
				*/
				var totalPrice = 0; //记录总价
				for (i = 1; i < books.length; i++) {
					book = books[i]; //每一个ul标签也就是一个图书对象
					price = book.lastElementChild.previousElementSibling || book.lastChild.previousSibling;
					totalPrice += parseFloat(price.innerHTML.replace('¥', ''));
				}
				sprice.innerHTML = "¥" + totalPrice;
			}

			calTotalPrice();
		</script>
	</body>
</html>
